<!-- import packingRecord from '@/views/components/tiXiangManage/packingRecord.vue' -->
<template>
  <div>
    <!-- 提箱记录 -->
    <span class="_before" v-if="oprName === 'tiXiang'">提箱记录</span>
    <span class="_before" v-if="oprName === 'huanXiang'">还箱记录</span>
    <div v-if="rowData && oprName === 'tiXiang'" style="float: right;margin-top: 60px;">
      <span>应提箱量：{{ rowData.totalQuantity || 0 }} 个</span> &nbsp;
      <span>实提箱量：{{ rowData.packedQuantity || 0 }} 个</span>
    </div>
    <div v-if="rowData && oprName === 'huanXiang'" style="float: right;margin-top: 60px;">
      <span>应还箱量：{{ rowData.totalReturnQuantity || 0 }} 个</span> &nbsp;
      <span>实还箱量：{{ rowData.returnedQuantity || 0 }} 个</span>
    </div>
    <el-table :data="packingRecordList" style="margin-top: 100px;">
      <el-table-column prop="containerNo" width="160px" label="箱号" />
      <el-table-column prop="boxType" label="箱型" />
      <el-table-column prop="boxCondition" label="箱况" />
      <el-table-column v-if="oprName === 'tiXiang'" prop="packingDate" label="提箱日期" width="200" />
      <el-table-column v-if="oprName === 'huanXiang'" prop="returnDate" label="还箱日期" width="200" />
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { onActivated, onMounted, ref, watch } from 'vue'
import { getDetailTable, getBoxEastDetailTable, addPackingDetail, deletePackingDetail, } from '@/api/orderManage/packingDetail'
import { getTable as returnDetailAgent, getDetailTable as returnDetailBoxEast } from '@/api/orderManage/returnBoxDetail'
import { formatDate } from '@/utils'

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  rowData: {
    type: Object,
    default: () => { }
  },
  roleName: {
    type: String,
    default: 'agent' // agent-货代； boxEast-集装箱公司
  },
  oprName: {
    type: String,
    default: 'tiXiang' // 'tiXiang' 'huanXiang'
  }
  // packingRecordList: {
  //   type: Array,
  //   default: () => []
  // }
})

onMounted(() => {
  console.log('onMounted------')
  showRecord()
})
watch(() => props.id, () => {
  showRecord()
})
const showRecord = () => {
  if (props.oprName === 'tiXiang') {
    showPackingRecord(props.rowData)
  } else {
    showReturnRecord(props.rowData)
  }
}

//查看 提箱记录
let packingRecordList = ref([])
const showPackingRecord = (row: any) => {
  const companyRole = localStorage.getItem('companyRole')
  packingRecordList.value = []
  if (!row.packingNo) return
  const data = {
    pageNum: 1,
    pageSize: 200,
    packingNo: row.packingNo
  }
  if (companyRole === 'zx') { //货代 查询提箱记录分页列表
    getDetailTable(data).then((res: any) => {
      console.log('res.data.list')
      packingRecordList.value = getPackingRecordList(res.data.list)
    })
  }
  if (companyRole === 'putBox') {//集装箱公司: 查询提箱记录分页列表
    getBoxEastDetailTable(data).then((res: any) => {
      packingRecordList.value = getPackingRecordList(res.data.list)
    })
  }
}
//查看 还箱记录 
const showReturnRecord = (row: any) => {
  const companyRole = localStorage.getItem('companyRole')
  packingRecordList.value = []
  if (!row.returnBoxNo) return
  const data = {
    pageNum: 1,
    pageSize: 200,
    returnBoxNo: row.returnBoxNo
  }
  if (companyRole === 'zx') { //货代   
    returnDetailAgent(data).then((res: any) => {
      packingRecordList.value = getPackingRecordList(res.data.list)
    })
  }
  if (companyRole === 'putBox') {//集装箱公司  
    returnDetailBoxEast(data).then((res: any) => {
      packingRecordList.value = getPackingRecordList(res.data.list)
    })
  }
}
//getPackingRecordList
function getPackingRecordList(list: any) {
  console.log(list)
  list.forEach((item: any) => {
    item.boxCondition = boxConditionFilter(item.boxCondition)
    item.boxType = boxTypeFilter(item.boxType)
    item.packingDate = formatDate(item.packingDate)
    item.returnDate = formatDate(item.returnDate)
  })
  return list
}

//过滤
const boxTypeFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}
const boxConditionFilter = (val: any) => {
  let result = ''
  const boxTypeList = [{ value: 15, label: '适货' }, { value: 10, label: '次新' }, { value: 20, label: '混提' },{ value: 5, label: '全新' }]
  boxTypeList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}

defineExpose({ showRecord })

</script>